<template>
    <div id="todoall">
        <todoname></todoname>
        <todoinput @addTask="addTask"></todoinput>
        <todolist :todolist="filteredTodoList"></todolist>
        <todobutton @changeActive="changeActive"></todobutton>
    </div>
</template>
  
<script>
import todolist from './todolist.vue'
import todobutton from './todobutton.vue'
import todoinput from './todoinput.vue'
import todoname from './todoname.vue'

export default {
    name: "todoall",
    data() {
        return {
            // 返回真数据
            todolist: [
                { id: 1, task: "天皇赏", isCompleted: true },
                { id: 2, task: "德比", isCompleted: true },
                { id: 3, task: "无败三冠", isCompleted: false }
            ],
            active: 0,

        }
    },
    computed: {
        filteredTodoList() {
            if (this.active === 0) {
                return this.todolist;
            } else if (this.active === 1) {
                return this.todolist.filter(item => item.isCompleted);
            } else {
                return this.todolist.filter(item => !item.isCompleted);
            }
        }
    },
    methods: {
        changeActive(active) {
            this.active = active;
            console.log(this.active);
        },
        addTask(taskname) {
            this.todolist.push({
                id: this.todolist.length + 1,
                task: taskname,
                isCompleted: false
            });
        },

    },
    components: {
        todolist,
        todobutton,
        todoinput,
        todoname
    }
};
</script>
  
<style>
#container {
    background-image: url('./assets/1.png');
    width: 100%;
    height: 100%;
    position: fixed;
    background-size: 100%, 100%;
    transition: opacity 3s ease;
    opacity: 1;
    z-index: -1;
}

#container.transparent {
    opacity: 0.5;
}
</style>